<template>
    <div class="componentContainer">
        <div class="searchContainer">
            <RouteRootPathSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addRouteRootPath()">添 加</el-button>
        </div>
        <div>
            <el-table
                :data="routeRootPathDataList.dataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
                ref="containerRef"
            >
                <el-table-column prop="routeRootPath" label="路由文根" />
                <el-table-column prop="routeRootName" label="路由文根名称" />
                <el-table-column prop="routeRootCnName" label="路由文根中文名称" />
                <el-table-column prop="routePathDescription" label="描述" />
                <el-table-column prop="componentCnName" label="关联组件" />
                <el-table-column prop="menuCnName" label="文根首页" />
                <el-table-column prop="routePathParam" label="路由文根首页跳转参数" />
                <el-table-column prop="createBy" label="创建人" />
                <el-table-column prop="createDate" label="创建时间" />
                <el-table-column prop="updateBy" label="修改人" />
                <el-table-column prop="updateDate" label="修改时间" />
                <el-table-column align="center" width="300">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button v-if="scope.row.tenantId !== 'base'" size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base'" type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-model:current-page="routeRootPathDataList.pageIndex"
                v-model:page-size="routeRootPathDataList.pageSize"
                :small="false"
                :background="true"
                layout="prev, pager, next, jumper, sizes, total"
                :total="routeRootPathDataList.recordCount"
                @change="changePage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 400]"
                style="float: right"
            />
        </div>
    </div>
    <div>
        <AddOrUpdateRouteRootPathDialog :title="title" :routeRootPathForm="routeRootPathForm" />
        <DeleteRouteRootPathDialog :routeRootPathForm="routeRootPathForm" />
    </div>
</template>

<script setup name="routeRootPath" lang="ts">
import {createTag} from "@/utils/ywuCommon";
import RouteRootPathSearch from "@/components/menu/routeRootPath/RouteRootPathSearch.vue";
import AddOrUpdateRouteRootPathDialog from "@/components/menu/routeRootPath/AddOrUpdateRouteRootPathDialog.vue";
import DeleteRouteRootPathDialog from "@/components/menu/routeRootPath/DeleteRouteRootPathDialog.vue";
import {routeRootPathInfoQuery} from "@/request/routeRootPath";
import {computed, ref} from "vue";
import {useRouteRootStore} from "@/stores/menu/routeRootPath";
import {useRoute} from "vue-router";

let title = ref("");
let routeRootPathForm = ref({});

let routeRootPathDataList = computed(() => {return useRouteRootStore().routeRootPathDataList})
let routeRootPathSearchData = computed(() => {return useRouteRootStore().routeRootPathSearchData})

// 查询站点信息
routeRootPathInfoQuery(routeRootPathSearchData.value).then(res => {
    useRouteRootStore().resetRouteRootPathDataList(res.data);
})

// 创建标签
let route = useRoute();
createTag(route);

function changePage(index, size) {
    routeRootPathSearchData.value["pageInfo"] = {
        pageIndex: index,
        pageSize: size
    };
    routeRootPathInfoQuery(routeRootPathSearchData.value).then(res => {
        useRouteRootStore().resetRouteRootPathDataList(res.data);
    })
}

function handleUpdate(index, raw) {
    title.value = "修改路由文根";
    routeRootPathForm.value = {
        id: raw.id,
        routeRootPath: raw.routeRootPath,
        routeRootName: raw.routeRootName,
        routePathDescription: raw.routePathDescription,
        componentId: raw.componentId,
        routeMenuHome: raw.routeMenuHome,
        routeRootCnName: raw.routeRootCnName,
        routePathParam: raw.routePathParam,
        showSite: raw.showSite
    }
    useRouteRootStore().resetAddOrUpdateDialog(true);
}

function handleDelete(index, raw) {
    title.value = "删除路由文根";
    routeRootPathForm.value = {
        id: raw.id,
        routeRootPath: raw.routeRootPath,
        routeRootName: raw.routeRootName,
        routePathDescription: raw.routePathDescription,
        componentId: raw.componentId,
        routeRootCnName: raw.routeRootCnName,
        routePathParam: raw.routePathParam,
        showSite: raw.showSite
    }
    useRouteRootStore().resetDeleteDialog(true);
}

function addRouteRootPath() {
    title.value = "添加路由文根";
    routeRootPathForm.value = {
        id: "",
        routeRootPath: "",
        routeRootName: "",
        routePathDescription: "",
        componentId: "",
        routeRootCnName: "",
        routePathParam: "",
        showSite: true
    }
    useRouteRootStore().resetAddOrUpdateDialog(true);
}
</script>

<style scoped lang="less">
.componentContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}
</style>